<template>
	<view class="zixun">
		<view class="head">
			<view class="logo">郑好办</view>
			<view class="inp">
				<uni-icons type="search" size="20"></uni-icons>
				<uni-icons type="mic" size="20"></uni-icons>
			</view>
			<view class="sao"><uni-icons type="scan" size="18" color="#fff"></uni-icons></view>
		</view>
		<view class="section">
			<swiper class="swiper" style="height: 350rpx; background-color: #fff;" circular="true" indicator-dots="true" autoplay="true" interval="3000" duration="1000">
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s1.png"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s2.png"></image></view>
				</swiper-item>
				<swiper-item>
					<view class="swiper-item"><image src="/static/home/s3.png"></image></view>
				</swiper-item>
			</swiper>
		</view>

		<view class="main">
			<view class="side" v-for="it in newlist" :key="it.id">
				<view class="l"><image src="/static//new/1.png" mode=""></image></view>

				<view class="r">
					<view class="r-t">{{ it.contents }}</view>
					<view class="r-b">
						<view class="b-l">{{ it.username }}</view>
						<view class="b-r">{{ it.cretatime | sss }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getnewlist } from '../../api/http.js';
export default {
	data() {
		return {
			page: {
				page: 1,
				pagelimit: 10
			},
			newlist: [],
			count: ''
		};
	},
	filters: {
		sss(str) {
			return str.substr(0, 10);
		}
	},
	created() {
		this.getnewlist();
	},
	methods: {
		getnewlist() {
			getnewlist(this.page).then(res => {
				console.log(res);
				this.newlist = [...this.newlist, ...res.data.data];
				this.count = res.data.pagecount;
			});
		},

		onReachBottom() {
			if (this.newlist.length >= this.count) {
				return;
			}
			this.page.page += 1;
			this.getnewlist();
		}
	}
};
</script>

<style lang="less">
.head {
	width: 750rpx;
	height: 90rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #e32517;
	box-sizing: border-box;
	padding: 0px 40rpx;
	.logo {
		font-size: 38rpx;
		color: #fff;
	}
	.inp {
		width: 400rpx;
		height: 60rpx;
		background-color: #fff;
		border-radius: 40rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 0px 20rpx;
	}
}
.main {
	width: 750rpx;
	box-sizing: border-box;
	padding: 0px 20rpx;
	.side {
		border-bottom: 1px #ccc solid;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 20rpx 0px;
		.l {
			width: 260rpx;
			height: 160rpx;
			border-radius: 20rpx;
			overflow: hidden;
		}
		.r {
			flex: 1;
			height: 140rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: space-between;
			flex-direction: column;
			.r-t {
				font-size: 34rpx;
				color: #000;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.r-b {
				display: flex;
				justify-content: space-between;
				align-items: center;
				.b-l {
					font-size: 28rpx;
					color: gray;
				}
				.b-r {
					font-size: 30rpx;
					color: gray;
				}
			}
		}
	}
}
image {
	width: 100%;
	height: 100%;
}

.swiper {
	.swiper-item {
		width: 750rpx;
		height: 350rpx;
	}
	/deep/ .uni-swiper-dot {
		// 指示点元素默认样式
		width: 13rpx !important;
		height: 13rpx !important;
		background: #dddedd !important;
	}

	/deep/ .uni-swiper-dot-active {
		// 指示点元素激活（当前选中）状态样式
		width: 13rpx !important;
		height: 13rpx !important;
		background: #0094fd !important;
		border-radius: 4rpx;
	}
}
</style>
